<template>
  <div class="language-switcher">
    <el-dropdown 
      trigger="click" 
      @command="handleLanguageChange"
      placement="bottom-end"
    >
      <el-button type="text" class="language-button">
        <el-icon><Platform /></el-icon>
        <span class="current-language">{{ currentLanguageLabel }}</span>
        <el-icon class="arrow-down"><ArrowDown /></el-icon>
      </el-button>
      
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item 
            v-for="lang in languageOptions" 
            :key="lang.value"
            :command="lang"
            :class="{ 'is-active': currentLanguage === lang.value }"
          >
            <span class="language-flag">{{ lang.flag }}</span>
            <span class="language-name">{{ lang.label }}</span>
            <el-icon v-if="currentLanguage === lang.value" class="check-icon">
              <Check />
            </el-icon>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Platform, ArrowDown, Check } from '@element-plus/icons-vue'

// 定义语言选项
const languageOptions = ref([
  {
    value: 'zh-CN',
    label: '简体中文',
    flag: '🇨🇳'
  },
  {
    value: 'en-US', 
    label: 'English',
    flag: '🇺🇸'
  }
])

// 当前语言状态
const currentLanguage = ref('zh-CN')

// 计算当前语言标签
const currentLanguageLabel = computed(() => {
  const lang = languageOptions.value.find(item => item.value === currentLanguage.value)
  return lang ? lang.label : '简体中文'
})

// 定义事件
const emit = defineEmits(['language-change'])

// 处理语言切换
const handleLanguageChange = (language) => {
  currentLanguage.value = language.value
  emit('language-change', language)
}
</script>

<style lang="scss" scoped>
.language-switcher {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.language-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  color: #606266;
  font-size: 14px;
  transition: all 0.3s;
  
  &:hover {
    background: rgba(255, 255, 255, 1);
    border-color: #409eff;
    color: #409eff;
  }
  
  .current-language {
    font-weight: 500;
  }
  
  .arrow-down {
    font-size: 12px;
    transition: transform 0.3s;
  }
}

:deep(.el-dropdown-menu) {
  min-width: 160px;
  padding: 8px 0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 14px;
  color: #606266;
  transition: all 0.3s;
  
  &:hover {
    background-color: #f5f7fa;
    color: #409eff;
  }
  
  &.is-active {
    background-color: #ecf5ff;
    color: #409eff;
    font-weight: 500;
  }
}

.language-flag {
  font-size: 16px;
  line-height: 1;
}

.language-name {
  flex: 1;
}

.check-icon {
  color: #67c23a;
  font-size: 16px;
}

// 响应式处理
@media (max-width: 768px) {
  .language-switcher {
    top: 15px;
    right: 15px;
  }
  
  .language-button {
    padding: 6px 10px;
    font-size: 13px;
    
    .current-language {
      display: none;
    }
  }
}
</style>
